<!DOCTYPE html>
<html>
<head>
    <meta charset="utf-8"/>
    <meta content="width=device-width, user-scalable=no, initial-scale=1.0, maximum-scale=1.0, minimum-scale=1.0"
          name="viewport">
    <meta content="IE=edge" http-equiv="X-UA-Compatible">
    <meta content="webkit|ie-comp|ie-stand" name="renderer">
    <title>商品添加sku表</title>
    <link href="./css/index.css" rel="stylesheet" type="text/css"/>
    <script src="../js/template-web.js"></script>
    <script src="../lib/jquery-3.4.1/jquery-3.4.1.min.js"></script>
    <script src="../js/lay-module/layuimini/miniTab.js"></script>
    <link href="../lib/layui-v2.6.3/css/layui.css" media="all" rel="stylesheet">
    <script src="../lib/layui-v2.6.3/layui.js"></script>
    <style type="text/css">
        body {
            background-color: #f6f4f4;
        }

        #formaddspecsDiv {
            background-color: #FFFFFF;
            height: auto;
            border-radius: 15px;
            margin-top: 5px;
        }
    </style>
</head>
<body>
<!--	类别选择、商品id-->
<div>
    <div class="layui-form" id="formaddspecsDiv">
        <div class="layui-inline" style="position: relative;left: 50px;top: 70px">
            <label>类别筛选：</label>
            <div class="layui-input-inline">
                <select id="selectskukindID" lay-filter="selectTesttwe"></select>
            </div>
        </div>
        <div class="layui-form-item" style="height: 100px">
        </div>
        <!--			表格-->
        <div id="app" v-cloak>
            <!-- 规格设置 -->
            <div class="specification">
                <ul class="spec-list" v-if="specification&&specification.length>0">
                    <li :key="index" class="item" v-for="(item, index) in specification">
                        <div class="name">
                            <input class="input" placeholder="输入产品规格属性名" v-model="item.name"/>
                            <span @click="delSpec(index)" class="deleteIcon">×</span>
                        </div>
                        <div class="values">
							<span :key="tag" class="tag" v-for="(tag, num) in item.value">
								<span>{{tag}}</span>
								<span @click="delSpecTag(index, num)" class="closeIcon">×</span>
							</span>
                            <div class="add-attr">
                                <input @blur.prevent="addSpecTag(index)" @keyup.enter="addSpecTag(index)"
                                       class='input addSku'
                                       placeholder="请输入产品属性值"
                                       v-model="addValues[index]"/>
                                <span @click="addSpecTag(index)" class="addIcon">+</span>
                            </div>
                        </div>
                    </li>
                </ul>
                <div class="add-spec">
                    <button :disabled="specification.length >= 10" @click="addSpec" class="addSkuBtn" style="margin-top: 30px">添加规格项目</button>
                </div>
            </div>
            <!-- 生成动态表格 -->

            <div class="example" style="width: 1750px;margin-top: 40px">
                <div style="width: 100%;height: 40px;background-color: rgba(193,193,193,0.27);align-items:center; display: -webkit-flex;font-weight: 8">
                    <div style="width: 50%;display: inline-block;text-align: center">
                        <span>规格名</span>
                    </div>
                    <div style="width: 40%;display: inline-block;text-align: center">
                        <span>规格值</span>
                    </div>
                </div>
                    <div :key="index" v-for="(item, index) in specification" style="border: 1px solid rgba(101,100,100,0.75);border-radius: 5px">
                        <div style="align-items:center; display: -webkit-flex">
                            <div style="width: 54rem;display: inline-block;border: 0px solid rgba(101,100,100,0.75);text-align: center;font-weight: 5">
                                <span>{{item.name}}</span>

                            </div>
                            <div style="width: auto;display: inline-block">
                                <div v-if="item.value.length>0">
                                    <div v-for="(items, index) in item.value" style="border: 1px solid rgba(101,100,100,0.75);border-top: none;width:56rem;height: 35px;margin-top: 1px;text-align: center;line-height: 35px;border-radius: 4px;font-weight: 4">{{items}}</div>
                                </div>
                            </div>

                        </div>

                    </div>
                <div style="margin-top: 80px">
                    <button :disabled="productArray.length<1" @click='submit(($("#selectskukindID").val()))' class="addSkuBtn" style="display: block;margin: 0 auto">提交</button>
                </div>
            </div>
        </div>

    </div>
</div>
</body>
<!--		<script src="https://www.jq22.com/jquery/jquery-3.3.1.js"></script>-->
<script src="js/vue.min.js"></script>
<script src="js/index.js"></script>
<script>
    $(document).on('click', '.uploadFile', function (e) {
        var value = $(this).parents("div").prev().children("input");
        value.val("OK")
        console.log(value.val());
    });
</script>
<script id="skuselectkind" type="text/template">
    <option></option>
    {{each datebate1 value}}
    {{if value.upname==null||value.upname==""}}
    <option value="{{value.id}}">{{@value.name}}</option>
    {{else}}
    <option value="{{value.id}}">{{@value.upname}}/{{@value.name}}</option>
    {{/if}}
    {{/each}}
</script>
<script>
    layui.use('form', function () {
        var form = layui.form
        $.get("/kind/getList", function (result) {
            date = {datebate1: result.data}
            mera = template("skuselectkind", date);
            $("#selectskukindID").append(mera);
            form.render('select');
        })
    })
</script>
</html>
